<template>
  <van-row>
    <div class="headerbox">
    <div class="header">
    <div class="headerC0">
      <div class="ssdiv">
        <img src="/assets/images/ss.png" /><input name="" type="text" placeholder="输入关键字..."/>
      </div>
    </div>
    <div class="headerR">
      <a><img src="/assets/images/tr.png" @click="onType" /></a>
    </div>
  </div>
  </div>
  <div class="clear"></div>
  <div class="hbox"></div>
    <van-col span="4">
      <van-sidebar v-model="activeIndex">
        <van-sidebar-item
          v-for="item in TypeList"
          :key="item.id"
          :title="item.name"
          @click="onLest"
        />
      </van-sidebar>
    </van-col>
    <van-col span="20">
      <van-grid :column-num="2">
        <div class="mainWarp" style="background:#f3f3f3" v-if="GoodsList.length>0">
          <li v-for="item of GoodsList" :key="item.id">
            <router-link :to="{path:'/product/product/info',query:{proid:item.id}}"><img :src="item.cover_cdn"/></router-link>
            <router-link :to="{path:'/product/product/info',query:{proid:item.id}}"><p class="tit">{{item.name}}</p></router-link>
            <div class="price" v-if="item.vip_price > 0">
              <p>￥{{item.vip_price}}<span>￥{{item.price}}</span></p>
            </div>
            <div class="price" v-else>
              <p>￥{{item.price}}</p>
            </div>
          </li>
        </div>
        <ul class="proul" v-else>
              <van-empty description="暂无商品" />
          </ul>
      </van-grid>
    </van-col>
  </van-row>
  <van-popup v-model:show="show" round position="bottom">
    <van-picker
        :columns="columns"
        @cancel="show = false"
        @confirm="onConfirm"
    />
    </van-popup>
<div class="clear"></div>
<!-- <div class="h54"></div> -->
<div class="clear"></div>
  <Menus />
</template>
<script>
import { ref } from "vue";
import Menus from "components/common/Menus.vue";
export default {
  components: {
    Menus,
  },

  created() {
    let typeid = this.$route.query.typeid

    this.typeid = Number(typeid)
    this.list()
    this.onLest()
    this.Type()
    this.ProList()
  },
  data() {
    const activeIndex = ref(0)
    return {
      LoginUser:this.$cookies.get('LoginUser') ? this.$cookies.get('LoginUser') : {},
      activeIndex,
      TypeList: [],
      GoodsList:[],
      typeid:0,
      show:false,
      flag:0,
      OrderBy:'id',
      show:false,
      OrderBy:'id',
      TypeData:[],
      columns:[],
      ProData:[],
    };
  },
  methods: {
    onType()
    {
        this.show = true
    },
    async Type()
    {
      let result = await this.$api.ProductType()

      // console.log(result)

      if(result.code === 1)
      {
        // let data = Array.from(result.data)
        // let data = Object.values(result.data)

        let data = []

        for(let item of result.data)
        {
          data.push(item.name)
        }

        this.TypeData = result.data

        this.columns = data
      }
    },
    // 控制弹出内容渲染
    onConfirm(item,index)
    {
        console.log(item)

        let data = this.TypeData[index]

        this.typeid = data.id

        this.show = false

        this.ProList()

    },
    // 异步传输
    async ProList()
    {
      let data = {
        typeid:this.typeid,
        userid:this.LoginUser.id,
        flag:this.flag,
        OrderBy:this.OrderBy
      }
      
      let result = await this.$api.ProductIndex(data)

      if(result.code === 1)
      {
        this.ProData = result.data
      }
    },
    // 选择
    onFlag(item)
    {
      this.flag = item
      this.ProList()
    },
    // 内容渲染
    onOrderBy(item)
    {
      this.OrderBy = item
      this.ProList()
    },
    // 右侧导航栏
    async list() {
      let result = await this.$api.Home();

      this.TypeList = result.data.TypeList;

      console.log(this.TypeList);

      
    },
    // 左侧内容格子
    async onLest(item)
    {
      let data={
        id:item
      }
      let result = await this.$api.ProductEdit(data)
      
      this.GoodsList = result.data
    },
    async onNote(item)
    {
      let data={
        Userid:item
      }
      let result = await this.$api.EditList(data)
      
      this.GoodsList = result.data
    }
  },
};
</script>
<style>
  .mainWarp{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    flex-direction: row;
  }
  li{
    width: 40%;
  }
  .hbox {
    width: 100%;
    height: 53px;
    overflow: hidden;
  }
  .h54 {
    width: 100%;
    height: 91px;
    overflow: hidden;
  }
</style>
